<template>
  <nav-bar />
  <view class="report-page">
    <!-- 标题 -->
    <view class="report-title">报表</view>
    <!-- 销售分组 -->
    <view class="section-title">销售</view>
    <view class="icon-row">
      <view class="icon-item" @click="onOrderClick">
        <uni-icons type="list" size="36" color="#ff7e2d" class="icon-svg" />
        <text class="icon-label">订单</text>
      </view>
      <view class="icon-item" @click="onInventoryClick">
        <text class="iconfont icon-navicon-pdd icon-svg" style="font-size: 36px; color: #ff7e2d;"></text>
        <!-- <uni-icons type="list" size="36" color="#ff7e2d" class="icon-svg" /> -->
        <text class="icon-label">盘点</text>
      </view>
      <view class="icon-item" @click="onScrapClick">
        <text class="iconfont icon-baofei icon-svg" style="font-size: 36px; color: #ff7e2d;"></text>
        <text class="icon-label">报废</text>
      </view>
      <view class="icon-item" @click="onLostAndFoundClick">
        <text class="iconfont icon-shiwuzhaoling icon-svg" style="font-size: 36px; color: #ff7e2d;"></text>
        <text class="icon-label">失物招领</text>
      </view> 
    </view>
    <my-tabbar />
  </view>
</template>

<script setup>
import MyTabbar from '@/components/my-tabbar.vue'
import { onLoad } from '@dcloudio/uni-app'
onLoad(() => {
    // 隐藏tabbar
    uni.hideTabBar()
})

function onOrderClick() {
  // 跳转到订单报表页面（预留）
  uni.navigateTo({
    url: '/pages/order_list/order_list'
  })
}

function onInventoryClick() {
  // 跳转到盘点页面
  uni.navigateTo({
    url: '/pages/inventory/inventory'
  })
}

function onScrapClick() {
  // 跳转到报废页面
  uni.navigateTo({
    url: '/pages/scrap/scrap'
  })
}

function onLostAndFoundClick() {
  // 跳转到失物招领页面
  uni.navigateTo({
    url: '/pages/LostAndFound/LostAndFound'
  })
}
</script>

<style scoped lang="scss">
.report-page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: 120rpx;
}

.report-title {
  font-size: 44rpx;
  font-weight: 600;
  color: #222;
  margin-top: 48rpx;
  margin-left: 40rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222;
  margin-left: 40rpx;
  margin-top: 32rpx;
  margin-bottom: 12rpx;
}

.icon-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-left: 24rpx;
  margin-bottom: 32rpx;
}

.icon-item {
  width: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 48rpx;
  margin-top: 8rpx;
}

.icon-svg {
  margin-bottom: 12rpx;
}

.icon-label {
  font-size: 28rpx;
  color: #ff7e2d;
  font-weight: 500;
}
</style> 